<div style='display:flex;flex-direction:column;height:100%;background:#34495E;'>
	<div style='height:120px;padding-top:30px;border-bottom:1px solid #666;'>
		<div style="width:70px;height:70px;background:red;margin:0 auto;border-radius:50%;overflow:hidden;">
			<img src='__PUBLIC__/img/avatar.jpg'  style='width:100%' />
		</div>
		<div style="text-align:center;font-size:12px;color:#fff;margin-top:10px">后台管理</div>
	</div>

	<!-- 导航栏总容器 -->
	<div id='nav' style="flex:1;color:#fff;font-size:15px;overflow-y:scroll;position:relative;width:230px;">

		<div id='l1' style='height:40px;line-height:40px;margin:5px 0px;text-indent:35px;border:1px solid #34495E'>首页</div>




<!-- 一级导航栏 -->
		<div class='l1' class='nav1' style='border:1px solid #34495E;height:40px;line-height:40px;margin-bottom:5px;display:flex;text-indent:35px'>
			<div style='flex:1'>设置1</div>
			<div style="width:20px;height:40px;text-indent:1px;text-align:left"> > </div>
		</div><!-- 一级导航栏   结束  -->

			<!--  子级导航容器 -->
			<div style='background:#191C21;padding:1px 0px;display:none'>	

				<!-- 二级导航栏 -->
				<div class='l2' style="height:30px;line-height:30px;margin:3px 0px;text-indent:50px;font-size:13px;display:flex;border:1px solid #191C21">
					<div style="flex:1">二级导航</div>
					<div style="height:30px;width:20px;text-indent:1px"> > </div>
				</div>
				<!-- 二级导航栏 结束  -->
					<!-- 三级导航容器 -->
					<div style='display:none'>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
					</div><!-- 三级导航容器 结束 -->

				<!-- 二级导航栏 -->
				<div class='l2' style="height:30px;line-height:30px;margin:3px 0px;text-indent:50px;font-size:13px;display:flex;border:1px solid #191C21">
					<div style="flex:1">二级导航</div>
					<div style="height:30px;width:20px;text-indent:1px"> > </div>
				</div>
				<!-- 二级导航栏 结束  -->
					<!-- 三级导航容器 -->
					<div style='display:none'>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
					</div><!-- 三级导航容器 结束 -->


			</div><!--  子级导航容器 结束  -->

<!-- 一级导航栏 -->
		<div class='l1' class='nav1' style='border:1px solid #34495E;height:40px;line-height:40px;margin-bottom:5px;display:flex;text-indent:35px'>
			<div style='flex:1'>设置2</div>
			<div style="width:20px;height:40px;text-indent:1px;text-align:left"> > </div>
		</div><!-- 一级导航栏   结束  -->

			<!--  子级导航容器 -->
			<div style='background:#191C21;padding:1px 0px;display:none'>	

				<!-- 二级导航栏 -->
				<div class='l2' style="height:30px;line-height:30px;margin:3px 0px;text-indent:50px;font-size:13px;display:flex;border:1px solid #191C21">
					<div style="flex:1">二级导航</div>
					<div style="height:30px;width:20px;text-indent:1px"> > </div>
				</div>
				<!-- 二级导航栏 结束  -->
					<!-- 三级导航容器 -->
					<div style='display:none'>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
					</div><!-- 三级导航容器 结束 -->

				<!-- 二级导航栏 -->
				<div class='l2' style="height:30px;line-height:30px;margin:3px 0px;text-indent:50px;font-size:13px;display:flex;border:1px solid #191C21">
					<div style="flex:1">二级导航</div>
					<div style="height:30px;width:20px;text-indent:1px"> > </div>
				</div>
				<!-- 二级导航栏 结束  -->
					<!-- 三级导航容器 -->
					<div style='display:none'>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
						<!-- 三级导航栏 -->
						<a href=''>
							<div class='l3' style="height:30px;line-height:30px;border:1px solid #191C21;margin:3px 0px;text-indent:70px;font-size:12px">
								<div style="flex:1">三级 导航</div>
							</div><!-- 三级导航栏 结束  -->
						</a>
					</div><!-- 三级导航容器 结束 -->


			</div><!--  子级导航容器 结束  -->





	</div><!-- 导航栏总容器 结束 -->

</div>


<script>
	$(function(){
		//获取一级导航缓存，自动展开缓存的导航
		var vl1 = sessionStorage.l1;
		if(vl1){
			vl1_arr = vl1.split(',');
			for(var i=0;i<vl1_arr.length;i++){
			//	alert(i);
				$('.l1').eq(vl1_arr[i]).next('div').css('display','block');
			}
		}


		//获取二级导航缓存，自动展开缓存的导航
		var vl2 = sessionStorage.l2;
		if(vl2){
			var vl2_arr = vl2.split(',');
			for(var i=0;i<vl2_arr.length;i++){
				$('.l2').eq(vl2_arr[i]).next('div').css('display','block');
			}
		}


		//获取三级导航缓存，并标识
		var vl3 = sessionStorage.l3;
		$('.l3').eq(vl3).css('border','1px solid #34495e');



		//点击一级导航，显示隐藏二级导航
		$('.l1').click(function(){
			var dis_l1 = $(this).next('div').css('display');
			if(dis_l1 == 'none'){
				$(this).next('div').css('display','block');
			}else{
				$(this).next('div').css('display','none');
			}


			//缓存展开的一级导航
			var l1_index = $(this).index('.l1');		//获取被点击的一级导航对象的下标
			var l1s = sessionStorage.l1;
			if(l1s){		//如果有一级缓存
				var l1s_arr = l1s.split(',');
				for(var i=0;i<l1s_arr.length;i++){		//判断当前选择的下标是否存在缓存中
					if(l1s_arr[i] == l1_index){
						var have = 1;
						var hindex = i;
					}
				}
				if(have){			//如果缓存中有下标则删除
					l1s_arr.splice(hindex,1);
					sessionStorage.l1=l1s_arr;
				}else{				//如果缓存中没有下标则添加
					l1s_arr.push(l1_index);
					sessionStorage.l1=l1s_arr;
				}

			}else{			
				sessionStorage.l1=l1_index;
			}
		});




		//点击二级导航，显示隐藏三级导航
		$('.l2').click(function(){
			var dis_l2 = $(this).next('div').css('display');
			if(dis_l2 == 'none'){
				$(this).next('div').css('display','block');
			}else{
				$(this).next('div').css('display','none');
			}

			var l2_index = $(this).index('.l2');	//获取被点击的二级导航下标

			var l2s = sessionStorage.l2;
			if(l2s){			//如果有二级导航缓存
				var l2s_arr = l2s.split(',');
				for(var i=0;i<l2s_arr.length;i++){
					if(l2s_arr[i] == l2_index){
						var have_l2 = 1;
						var hindex_l2 = i;
					}
				}
				if(have_l2){		//判断点击的下标被缓存了则从数组中删除
					l2s_arr.splice(hindex_l2,1);
					sessionStorage.l2 = l2s_arr;
				}else{				//如果没有缓存该下标则添加到数组并缓存
					l2s_arr.push(l2_index);
					sessionStorage.l2 = l2s_arr;
				}
			}else{
				sessionStorage.l2 = l2_index;	//缓存二级导航
			}
		})


		//缓存被点击的三级导航
		$('.l3').click(function(){
			$(this).css('border','1px solid #34495e');
			var l3_index = $(this).index('.l3');
			sessionStorage.l3 = l3_index;
		});





		//一级导航鼠标滑过显示隐藏边框
		$('.l1,#l1').mouseover(function(){
			$(this).css('border','1px solid #555');
		});
		$('.l1,#l1').mouseleave(function(){
			$(this).css('border','1px solid #34495E');
		});



		//二级导航鼠标滑过显示隐藏边框
		$('.l2').mouseover(function(){
			$(this).css('border','1px solid #34495E');
		})
		$('.l2').mouseleave(function(){
			$(this).css('border','1px solid #191C21');
		})

		//三级导航鼠标滑过显示隐藏边框
		get_l3_index = sessionStorage.l3;

		$('.l3').mouseover(function(){
			$(this).css('border','1px solid #34495e')
		})
		$('.l3').mouseleave(function(){
			if(get_l3_index != $(this).index('.l3')){	
				$(this).css('border','1px solid #191C21');
			}
		});


	});

</script>